<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<ui:composition template="/template.xhtml">
	<ui:define name="content">
		<p:layoutUnit position="west" size="0" style="border:none;">  
	   	</p:layoutUnit>  
		  
	    <p:layoutUnit position="east" size="0" style="border:none;">  
	    </p:layoutUnit>
		    
		<p:layoutUnit position="center" styleClass="telaPrincipal"> 
		   	<h:form>
		   		<div align="center">
	    			<p:panel header="Cadastro dos Modulos" style="width: 75%;">
						<p:panelGrid id="painel" style="border:none;">
							<p:row>
								<p:column>
									<p:outputLabel for="nome-modulo" value="Módulo: " />
								</p:column>
								<p:column colspan="3">
									<p:inputText id="nome-modulo" value="#{cadastroBean.modulo.modulo}" size="40" >
										<p:focus />
									</p:inputText>
								</p:column>
								<p:column>
									<p:outputLabel for="media-modulo" value="Media: " />
								</p:column>
								<p:column>
									<p:inputText id="media-modulo" value="#{cadastroBean.modulo.media}" size="10"/>
								</p:column>
							</p:row>
							
							<p:row>
								<p:column>
									<p:outputLabel for="cor-modulo" value="Cor:" />
								</p:column>
								<p:column>
									<p:selectOneMenu id="cor-modulo" value="#{cadastroBean.modulo.cor}">
										<f:selectItem itemLabel="Preto" itemValue="black" />  
										<f:selectItem itemLabel="Vermelho" itemValue="red" />
									</p:selectOneMenu>
								</p:column>
								<p:column>
									<p:outputLabel value="Recebido: " />
								</p:column>
								<p:column>
									<p:selectBooleanButton value="#{cadastroBean.modulo.recebido}" onLabel="Sim" offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
								</p:column>
								<p:column>
									<p:outputLabel value="Pago: " />
								</p:column>
								<p:column>
									<p:selectBooleanButton value="#{cadastroBean.modulo.pago}" onLabel="Sim" offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
								</p:column>
							</p:row>
						</p:panelGrid>
						<p:separator />
						<div align="right">
							<p:commandButton actionListener="#{cadastroBean.adicionarModulo}" icon="ui-icon-plusthick" value="Salvar" 
								update="@([id$=tabelaModulos, painel, messages])" ajax="false"/>
						</div>
					</p:panel>

					<p:panel header="Modulos Cadastrados" style="width: auto;">
						<p:dataTable id="tabelaModulos" value="#{cadastroBean.listaModulos}" var="modulo">
							
							<p:column headerText="Modulo">
								<h:outputText value="#{modulo.modulo}" style="color: #{modulo.cor};" styleClass="textoNegrito"/>
							</p:column>
			
							<p:column headerText="Media" width="10%">
								<div align="center">
									<h:outputText value="#{modulo.media}" style="color: #{modulo.cor};" styleClass="textoNegrito"/>
								</div>
							</p:column>
			
							<p:column headerText="Recebido" width="10%">
								<div align="center">
									<p:selectBooleanButton value="#{modulo.recebido}" onLabel="Sim" offLabel="Não" disabled="true" style="color: #{modulo.cor}; opacity: 1; border: none;"/>
								</div>
							</p:column>
			
							<p:column headerText="Pago" width="10%">
								<div align="center">
									<p:selectBooleanButton value="#{modulo.pago}" onLabel="Sim" offLabel="Não" disabled="true" style="color: #{modulo.cor}; opacity: 1; border: none;"/>
								</div>
							</p:column>
							
							<p:column headerText="Editar" width="10%">
								<div align="center">
									<p:commandButton actionListener="#{cadastroBean.editarModulo(modulo)}" icon="ui-icon-pencil" update="@([id$=tabelaModulos, painel])" />
								</div>
							</p:column>
			
							<p:column headerText="Excluir" width="10%">
								<div align="center">
									<p:commandButton actionListener="#{cadastroBean.removerModulo(modulo)}" icon="ui-icon-trash" update="@([id$=tabelaModulos, messages])" 
											onclick="if (!confirm('Você deseja remover o item selecionado?')) return false;" ajax="false"/>
								</div>
							</p:column>
						</p:dataTable>
					</p:panel>
					<p:separator />
					<div align="right">
						<p:commandButton action="#{cadastroBean.cancelar}" value="Cancelar" icon="ui-icon-close" ajax="false" styleClass="buttonsFooter"/>
						<p:commandButton action="voltarInicio" value="Voltar" icon="ui-icon-seek-prev" ajax="false" styleClass="buttonsFooter"/>
						<p:commandButton action="#{cadastroBean.avancarCadastroFinal}" value="Avançar" icon="ui-icon-seek-next" ajax="false" styleClass="buttonsFooter"/>
					</div>
				</div>
			</h:form>	
		</p:layoutUnit>		
	</ui:define>
</ui:composition>
</html>